<template>
	<!--增加抽奖机会组件-->
	<div class="add-prize-change-box">
		<div class="wrap-box">
		<div class="connect-box">
			<div class="top-box">
				<header>
				<hr />
				<p>完成任务 增加抽奖</p>
				<hr />
			</header>
			<img src="../../assets/images/choujiang/invite-prize.png"/>
			<p class="top-tip">邀请 {{addChangeInfo.unitInviteNum}} 位好友看直播</p>
			</div>
			<div class="bottom-box">
				<p>您已邀请{{addChangeInfo.inviteNum}} 位</p>
				<div class="to-invite" v-if="isUnfinished" @click="openInviteCard">
					去邀请, 获{{addChangeInfo.unitDrawTimes}}次抽奖机会
				</div>
				<div class="success-invite" @click="clickSureBtn" v-if="isSuccessInviteBtn">
					<!--成功获得{{addChangeInfo.addDrawTimes}}次抽奖机会-->
					您已完成本次任务
				</div>
				<div class="sure-btn" v-if="isUnfinished"  @click="clickSureBtn" >
					我知道了
				</div>
			</div>
		</div>
		<div class="close-btn" @click="clickClose"></div>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			addChangeInfo:Object,
		},
		data() {
			return {
               isSuccessInviteBtn:false,
               isUnfinished:false,
			}
		},
		created(){
			//console.log(this.addChangeInfo)
			//this.addChangeInfo.inviteNum = 5
			if(this.addChangeInfo.inviteNum>=this.addChangeInfo.unitInviteNum){//完成
				this.isSuccessInviteBtn = true
			}else{//未完成
				this.isUnfinished = true
			}
		},
		methods: {
           clickSureBtn(){//我知道了
           	this.$emit('formChildMsg', {
					type: 'closeAddPrizeChangeCom',
					data: 'ruan'
				})
           },
           openInviteCard(){//打开邀请卡
           	  this.$emit('formChildMsg', {
					type: 'openInviteCard',
					data: 'ruan'
				})
           },
           clickClose(){
           	  this.$emit('formChildMsg', {
					type: 'closeAddPrizeChangeCom',
					data: 'ruan'
				})
           },
		}
	}
</script>

<style scoped="scoped">
	.wrap-box{
		width:100vw;
		height: 900px;
		/*background: salmon;*/
		position: relative;
	}
	.close-btn {
		width: 63px;
		height: 63px;
		background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
		background-size: 63px 63px;
		/*margin: 100px auto 0;*/
		position: absolute;
		bottom: 10px;
		left: 346px;
	}
	.success-invite{
		width: 410px;
		height: 65px;
		background: linear-gradient(0deg, #FFCCAC, #FEE3D2);
		line-height: 65px;
		text-align: center;
		border-radius:32px ;
		color: #CD3416;
		font-weight: 500;
		font-size: 28px;
		margin-top: 39px;
	}
	.bottom-box{
		width: 100%;
		background: white;
		flex: 1;
		border-radius: 0  0 17px  17px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.bottom-box p{
		font-size: 26px;
		font-weight: 400;
		color: #965636;
		text-align: center;
		/*margin: 19px 0  26px;*/
	}
	.sure-btn{
		width: 410px;
		height: 65px;
		background: #FEFDF9;
		border: 1px solid #D0A286;
		line-height: 65px;
		text-align: center;
		color:#965636 ;
		font-weight: 500;
		font-size: 26px;
		border-radius:32px ;
		margin: 0 auto;
	}
	.to-invite{
		width: 410px;
		height: 65px;
		background: linear-gradient(0deg, #FFCCAC, #FEE3D2);
		line-height: 65px;
		text-align: center;
		margin: 0 auto;
		color: #CD3416;
		font-weight: 500;
		font-size: 28px;
		border-radius:32px ;
		margin: 28px 0 21px;
	}
	.top-tip{
		font-size: 32px;
		line-height: 40px;
		text-align: center;
		color: white;
	}
	.connect-box img{
		width: 119px;
		height: 119px;
		display: block;
		margin: 29px auto 36px;
	}

	.top-box{
		width: 561px;
		height: 372px;
		background: linear-gradient(-45deg, #EF3B3B 0%, #FF836B 100%);
		border-radius: 17px 17px 0 0 ;
	}
	.add-prize-change-box{
		width: 100vw;
		height: 100vh;
		/*background: seashell;*/
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1310;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.connect-box{
		width: 561px;
		height: 693px;
		background: white;
		border-radius: 17px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 70px auto 0;
	}
	header{
		width: 100%;
		height: 80px;
	/*	background: darkcyan;*/
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   margin-top: 30px;
	}
	header hr{
		width: 60px;		
		border: 1px solid transparent;
		border-bottom: 1px solid white;
	}
	header p{
		margin:0 40px;
		font-size: 38px;
		font-weight: 600;
		color: #FFFFFF;
	}
</style>